
<template>
  <div class="image-banner" :style="containerStyle">
    <!-- 无图片 -->
    <div v-if="!data.images || !data.images.length" class="empty-container">
      <el-empty description="暂无图片"
      image="/暂无.png"
       style="--el-empty-image-width: 300px;"
      />
    </div>

    <!-- 一行一个 -->
    <div
      v-else-if="data.displayMode === 'single'"
      class="single-image-container"
      :style="imageContainerStyle"
    >
      <div
        v-for="(image, index) in data.images"
        :key="index"
        class="image-item"
        :style="imageItemStyle"
      >
        <img
          :src="image.url"
          :alt="image.alt || ''"
          draggable="false"
          :style="imageStyle"
        />
        <div
          v-if="image.title"
          class="image-title"
        >
          {{ image.title }}
        </div>
      </div>
    </div>

    <!-- 轮播组件 -->
    <div
      v-else
      class="carousel-container"
      :style="swiperContainerStyle"
    >
      <div
        class="carousel-track"
        :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
      >
        <div
          v-for="(image, index) in data.images"
          :key="index"
          class="carousel-slide"
        >
          <img
            :src="image.url"
            :alt="image.alt || ''"
            draggable="false"
            :style="imageStyle"
          />
          <div
            v-if="image.title"
            class="image-title"
          >
            {{ image.title }}
          </div>
        </div>
      </div>

      <!-- 分页器 -->
      <div
        v-if="data.showPagination"
        class="carousel-pagination"
      >
        <span
          v-for="(image, index) in data.images"
          :key="index"
          :class="{ active: currentIndex === index }"
          @click="goToSlide(index)"
        ></span>
      </div>
    </div>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 轮播实例
const currentIndex = ref(0)
let autoplayTimer = null

// 计算容器样式
const containerStyle = computed(() => {
  return {
    marginTop: `${props.styles.marginTop || 0}px`,
    marginBottom: `${props.styles.marginBottom || 0}px`,
    marginLeft: `${props.styles.marginLeft || 0}px`,
    marginRight: `${props.styles.marginRight || 0}px`
  }
})

// 计算图片容器样式
const imageContainerStyle = computed(() => {
  return {
    padding: `0 ${props.data.pageMargin || 10}px`
  }
})

// 计算图片项样式
const imageItemStyle = computed(() => {
  return {
    marginBottom: `${props.data.imageSpacing || 10}px`
  }
})

// 计算图片样式
const imageStyle = computed(() => {
  return {
    width: '100%',
    height: '100%',
    display: 'block',
    borderRadius: `${props.data.borderRadius || 0}px`,
    objectFit: props.data.objectFit || 'cover'
  }
})

// 计算轮播容器样式
const swiperContainerStyle = computed(() => {
  return {
    height: `${props.data.height || 150}px`,
    borderRadius: `${props.data.borderRadius || 0}px`
  }
})

// 生命周期
onMounted(() => {
  nextTick(() => {
    if (props.data.displayMode !== 'single') {
      initCarousel()
    }
  })
})

onUnmounted(() => {
  if (autoplayTimer) {
    clearInterval(autoplayTimer)
    autoplayTimer = null
  }
})

// 初始化轮播
function initCarousel() {
  // 设置自动播放
  if (props.data && props.data.autoplay) {
    autoplayTimer = setInterval(() => {
      // 安全检查，确保组件未被销毁且数据存在
      if (!props.data || !props.data.images || props.data.images.length === 0) {
        if (autoplayTimer) {
          clearInterval(autoplayTimer)
          autoplayTimer = null
        }
        return
      }
      nextSlide()
    }, props.data.interval || 3000)
  }
}

// 下一张
function nextSlide() {
  // 安全检查，确保组件未被销毁且数据存在
  if (!props.data || !props.data.images || props.data.images.length === 0) {
    return
  }
  currentIndex.value = (currentIndex.value + 1) % props.data.images.length
}

// 上一张
function prevSlide() {
  if (props.data.images.length > 0) {
    currentIndex.value = currentIndex.value === 0 ? props.data.images.length - 1 : currentIndex.value - 1
  }
}

// 跳转到指定幻灯片
function goToSlide(index) {
  currentIndex.value = index
}
</script>

<style lang="scss" scoped>
.image-banner {
  width: 100%;
  box-sizing: border-box;

  .empty-container {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent; /* 改为透明背景，替代原来的 #f5f5f5 */
    overflow: hidden;
  }

  .single-image-container {
    width: 100%;

    .image-item {
      width: 100%;
      position: relative;

      img {
        width: 100%;
        height: 100%;
        display: block;
      }

      .image-title {
        height: 36px;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        text-align: center;
        line-height: 36px;
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }
  }

  .carousel-container {
    width: 100%;
    position: relative;
    overflow: hidden;

    .carousel-track {
      display: flex;
      width: 100%;
      height: 100%;
      transition: transform 0.5s ease;

      .carousel-slide {
        width: 100%;
        flex-shrink: 0;
        position: relative;

        img {
          width: 100%;
          height: 100%;
          display: block;
        }

        .image-title {
          height: 36px;
          width: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          color: #fff;
          text-align: center;
          line-height: 36px;
          position: absolute;
          bottom: 0;
          left: 0;
        }
      }
    }

    .carousel-pagination {
      position: absolute;
      bottom: 10px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      gap: 8px;
      z-index: 10;

      span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        transition: background-color 0.3s;

        &.active {
          background-color: #fff;
        }
      }
    }
  }
}
</style>
